<template>
    <el-scrollbar ref="headTagScrollbarRef" @scroll="scroll" :always="true">
        <div class="h-[36px] w-full flex flex-row tabDiv pl-2" ref="headTagsRef">
            <el-tooltip 
                placement="top" 
                v-for="tag in tags" 
                :key="tag.id"
                :content="tag.name"
                :visible="tag.showTooltip && tag.tooltipVisible && !dragFlag"
            >
                <span  
                    v-permission="tag.permission"
                    @mouseenter="mouseenterTag"
                    @mouseleave="mouseleaveTag" 
                    :title="tag.name"
                    :class='"tag  " 
                        + "  "
                        + (tag.choosed ? " bg-[#e6f7ff] " : " bg-[#f8f8f9] ")
                        + (tag.choosed ? " text-[#2d8cf0] " : " ")
                        + (tag.choosed ? " border-[#2d8cf0] border-[1px] border-solid border-b-0 " : " border-[#c6c6c6] border-[1px] border-solid border-b-0 ")
                        '
                    draggable="true" 
                    @click.stop="chooseTag(tag)"
                    @contextmenu.prevent="openContextMenu"
                    @mousedown="handleMouseDown"
                    >
                    {{tag.tagName}}
                    <!-- @mouseenter="(e)=>mouseEnterI(e, tag.choosed)" -->
                    <!-- @mouseleave="(e)=>mouseleaveI(e, tag.choosed)"  -->
                    <i  v-if="tags.length > 1"
                        @click.stop="handleClose(tag)"
                        :class='"  " 
                                + (tag.choosed ? " hover:bg-[#2d8cf0] hover:text-[#fff] ": " hover:bg-[#ccc] hover:text-[#fff] ")
                                + " rounded-full el-icon el-tag__close " + (dragFlag?" ":"")'>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                            <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg></i>
                </span>
            </el-tooltip>
            <span class="select-none">&nbsp;</span>
        </div>
    </el-scrollbar>
    <!-- Element 下拉菜单（模拟右键菜单） -->
    <el-dropdown size="small" :class="['', 'top-['+y+'px]', 
        'left-['+x+'px]']" ref="contextMenu" trigger="contextmenu" :visible="isMenuVisible" @command="handleCommand">
        <span class="select-none">&nbsp;</span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="close">关闭</el-dropdown-item>
                <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
                <el-dropdown-item command="closeRight">关闭右侧标签</el-dropdown-item>
                <el-dropdown-item command="closeAll">全部关闭</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts" name="HeadTag">
import { ref, onMounted, onUpdated, getCurrentInstance, defineComponent, useTemplateRef, defineProps } from 'vue'
import {type TagType} from '@/components/headtag/TagType'
import {randomId} from '@/utils/IdUtils'
import { useRouter } from 'vue-router'
import { defaultPath, MenuConfig, findbyPath, findDefaultPage } from '@/router/MenuConfig'
import {emitter} from '@/utils/Emitter'
import {type Menu} from "@/components/menu/MenuTypes"
import { useTagBarStore } from '@/components/headtag/TagBarStore'
import { storeToRefs } from 'pinia';
import {getLength, indexLength} from '@/utils/StrUtils'
import {Flip, FlipList} from "@/utils/FlipUtil"
import { useApplicationStore } from '@/pages/application/applicationStore'
import { usePermissionStore } from '../role/permissionStore'

let permissionStore = usePermissionStore()
let {permissionList} = storeToRefs(permissionStore)

// 路由
const router = useRouter()
    
// 页面引用
const headTagsRef = useTemplateRef<any>("headTagsRef")
const headTagScrollbarRef = useTemplateRef<any>("headTagScrollbarRef")

// 存储
let tagBarStore = useTagBarStore()
let {initTags, initTag} = tagBarStore
let { tags, setTagLeftInitActionPath } = storeToRefs(tagBarStore)
let { activeMenuIndex } = storeToRefs(useApplicationStore())

// 初始化tagName
initTags()

// 临时记录滚动条位置
let scrollLeft = ref<number>(0)

// 监听鼠标滑轮事件
onMounted(() => {
    try {
        (headTagsRef.value! as any).addEventListener('wheel', (event: any) => {
            headTagScrollbarRef.value!.handleScroll()
            scrollLeft.value += event.deltaY;
            headTagScrollbarRef.value!.setScrollLeft(scrollLeft.value)
        });
    } catch (err) {
        console.error(err)
    }
})

// 滑动事件
const scroll = (e: any) => {
    scrollLeft.value = e.scrollLeft
    contextMenu.value.handleClose()
}


// 关闭
const handleClose = (tag: TagType) => {
    let index = tags.value.indexOf(tag)
    tags.value.splice(index, 1)
    if (tag.choosed == true) {
        // 当前选中进行关闭, 打开左侧tag
        if (tags.value.length == 0) {
            // 打开首页
            router.push({
                path: defaultPath
            })
        } else {
            if (index - 1 < 0) {
                let tag = tags.value[index]
                chooseTag(tag)

            } else {
                let tag = tags.value[index - 1]
                chooseTag(tag)
            }
        }
    }
}
// 记录页面点击tag
let inChooseTag:TagType|null = null
// 选择
const chooseTag = (tag: TagType) => {
    for (let tag of tags.value) {
        tag.choosed = false
    }
    tag.choosed = true
    activeMenuIndex.value = tag.path
    router.push({
        path: tag.path
    })
    inChooseTag = tag;
}

// 初始化路由监听, 当渲染还未完成时触发
if(setTagLeftInitActionPath.value != null && setTagLeftInitActionPath.value != undefined){
    let path = setTagLeftInitActionPath.value
    if(path){
        let item: Menu = findbyPath(path as string)
        for (let tag of tags.value) {
            if (tag.path == item.path) {
                // 滑动到这个地方
                if(tag == inChooseTag){
                    
                }else{
                    setTimeout(()=>{
                        if(!headTagsRef.value){
                            return;
                        }
                        let children = [...headTagsRef.value.children]
                        let tagIndex = tags.value.indexOf(tag)
                        let tagElementIndex = children[tagIndex]
                        headTagScrollbarRef.value.setScrollLeft(tagElementIndex.offsetLeft)
                        inChooseTag = null
                    },0)
                }
                break
            }
        }
    }
    setTagLeftInitActionPath.value = null
}
// 路由监听
emitter.on("setTagLeft", (path) => {
    let item: Menu = findbyPath(path as string)
    for (let tag of tags.value) {
        if (tag.path == item.path) {
            // 滑动到这个地方
            if(tag == inChooseTag){
                
            }else{
                
                setTimeout(()=>{
                    if(!headTagsRef.value){
                        return;
                    }
                    let children = [...headTagsRef.value.children]
                    let tagIndex = tags.value.indexOf(tag)
                    let tagElementIndex = children[tagIndex]
                    headTagScrollbarRef.value!.setScrollLeft(tagElementIndex.offsetLeft)
                    inChooseTag = null
                },0)
            }
            return;
        }
    }
})


// tag拖拽
/** 获取顶层div */
const findDragElement = (target: any) => {
    try{
        if(target.getAttribute("draggable")=='true'){
            return target;
        }else{
            return findDragElement(target.parentElement)
        }
    }catch(err){
        return undefined
    }
}
let sourceElement:any = null
let targetElement: any = null
let inFlag:boolean = false // 拖动进入标记
let dragFlag: boolean = false // 拖动标记
onMounted(()=>{
    headTagsRef.value!.ondragstart = (e:any)=>{
        contextMenu.value.handleClose()
        dragFlag = true
        let targetElement = findDragElement(e.target)

        setTimeout(()=>{
            targetElement.classList.add("moving")
            e.target.classList.add("moving")
        },0)
        sourceElement = targetElement

        let children = [...headTagsRef.value.children]
        children.forEach((element:any)=>{
            element?.children[0]?.classList.add("pointer-events-none")
        })

    }
    headTagsRef.value!.ondragover = (e:any)=>{
        e.preventDefault()
    }
    headTagsRef.value!.ondragenter = (e:any)=>{
        inFlag = true;
        let findTargetElement = findDragElement(e.target)
        if (targetElement == findTargetElement) {
            return
        }
        targetElement = findTargetElement
        if (targetElement === sourceElement) {
            return
        }
        
        e.preventDefault()
        if(targetElement === sourceElement || targetElement === headTagsRef.value){
            return
        }
        

        let children = [...headTagsRef.value.children]
        let sourceIndex = children.indexOf(sourceElement)
        let targetIndex = children.indexOf(targetElement)


        if(sourceIndex > targetIndex){
            
            let sourceTag = tags.value[sourceIndex]
            if(!sourceTag || (targetIndex == null || targetIndex == undefined || targetIndex < 0)){
                return;
            }

            // 动画{
            let flipList;
            if(import.meta.env.VITE_TAG_ANIMITION === "on"){
                children.splice(sourceIndex, 1)
                flipList = new FlipList(children, 0.5)
                headTagsRef.value.insertBefore(sourceElement, targetElement)
            }
            // 动画}
            
            tags.value.splice(sourceIndex, 1)
            tags.value.splice(targetIndex, 0, sourceTag)

            // 动画{
            if(import.meta.env.VITE_TAG_ANIMITION === "on"){
                flipList!.invert()
            }
            // 动画}

        }else{
            let sourceTag = tags.value[sourceIndex]
            if(!sourceTag || !targetIndex){
                return;
            }

            // 动画{
            let flipList;
            if(import.meta.env.VITE_TAG_ANIMITION === "on"){
                children.splice(sourceIndex, 1)
                flipList = new FlipList(children, 0.5)
                headTagsRef.value.insertBefore(sourceElement, targetElement.nextElementSibling)
            }
            // 动画}

            tags.value.splice(targetIndex + 1, 0, sourceTag)
            tags.value.splice(sourceIndex, 1)

            // 动画{
            if(import.meta.env.VITE_TAG_ANIMITION === "on"){
                flipList!.invert()
            }
            // 动画}
        }

        // targetElement.children[0].classList.remove("text-white")
        // targetElement.children[0].classList.remove("bg-[#409eff]")
        // sourceElement.children[0].classList.remove("text-white")
        // sourceElement.children[0].classList.remove("bg-[#409eff]")
    }

    headTagsRef.value!.ondragend = (e:any)=>{
        inFlag = false;
        dragFlag = false
        e.target.classList.remove("moving")
        let children = [...headTagsRef.value.children]
        children.forEach((element:any)=>{
            element?.children[0]?.classList.remove("pointer-events-none")
        })
    }

})

// let mouseEnterI = (e:any, choose:boolean)=> {
//     if(inFlag){
//         return;
//     }
//     if(choose){
//         e.target.classList.add("bg-[#2d8cf0]")
//         e.target.classList.add("text-[#fff]")
//     }else{
//         e.target.classList.add("bg-[#ccc]")
//         e.target.classList.add("text-[#fff]")
//     }
// }

// let mouseleaveI = (e:any, choose:boolean)=>{
//     e.target.classList.remove("bg-[#2d8cf0]")
//     e.target.classList.remove("text-[#fff]")
//     e.target.classList.remove("bg-[#ccc]")
//     e.target.classList.remove("text-[#fff]")
// }
let mouseenterTag = (e:any)=> {
    let targetElement = e.target
    let children = [...headTagsRef.value.children]
    let targetIndex = children.indexOf(targetElement)
    let targetTag = tags.value[targetIndex]
    targetTag.tooltipVisible= true
}

let mouseleaveTag = (e:any)=>{
    let targetElement = e.target
    let children = [...headTagsRef.value.children]
    let targetIndex = children.indexOf(targetElement)
    let targetTag = tags.value[targetIndex]
    targetTag.tooltipVisible= false
}

const isMenuVisible = ref(false)
const contextMenu = ref<any>(null)
let x = ref<number>(0)
let y = ref<number>(0)
let mouseRightTag = ref<TagType>()
// 右键点击时触发
const openContextMenu = (event:any) => {
    console.log(event)

    let element = findDragElement(event.target)
    let children = [...headTagsRef.value.children]
    let elementIndex = children.indexOf(element)
    mouseRightTag.value = tags.value[elementIndex]

    isMenuVisible.value = true
    // 手动设置菜单位置（基于鼠标坐标）
    
    if (contextMenu.value) {
        x.value = event.clientX - 200
        y.value = event.clientY - 90
        contextMenu.value.$el.style.left = `${x.value}px`
        contextMenu.value.$el.style.top = `${y.value}px`
        contextMenu.value.handleClose()
        contextMenu.value.handleOpen()
    }
    
}

// 菜单项点击事件
const handleCommand = (command:string) => {
    isMenuVisible.value = false
    switch (command) {
        case 'close':
            if(tags.value.length > 1){
                handleClose(mouseRightTag.value!)
            }
            break
        case 'closeAll':
            
            let menu:Menu = findDefaultPage(permissionList.value)!
            router.push(menu.path!)

            tags.value = []
            let newTag = {
                id: randomId(),
                name: menu.name,
                choosed: true,
                path: menu.path as string,
                permission: menu.permission,
            }
            tags.value.push(newTag)
            initTag(newTag)

            break;
        case 'closeOther':
            tags.value = []
            tags.value.push(mouseRightTag.value!)
            chooseTag(mouseRightTag.value!)
            break;
        case 'closeRight':
            let i = tags.value.indexOf(mouseRightTag.value!)
            tags.value.splice(i + 1)
            let hasChoose:boolean = false
            for(let tag of tags.value){
                if(tag.choosed == true){
                    hasChoose = true
                    break;
                }
            }
            if(!hasChoose){
                chooseTag(tags.value[tags.value.length - 1])
            }
            break;
    }
}

const handleMouseDown = (event:any)=>{
    if (event.button === 1) { // 判断中键
        console.log('中键被按下');
        event.preventDefault(); // 可选：阻止浏览器默认行为（如自动滚动）
        
        let element = findDragElement(event.target)
        let children = [...headTagsRef.value.children]
        let elementIndex = children.indexOf(element)
        let tag = tags.value[elementIndex]
        handleClose(tag)
    }
}
</script>

<style scoped>
    .tag.moving{
        background: transparent;
        color: transparent;
        border: 1px dashed #ccc;
    }
    
    .tag{
        width: 140px;
        min-width: 140px;
        max-width: 140px;
        cursor: pointer;
        display: inline-flex;

        align-items: center;
        justify-content: space-between;
        
        border-image-outset: 0;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;

        /* border-bottom-color: rgb(217, 236, 255);
        border-bottom-style: none;
        border-bottom-width: 0px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        
        border-left-color: rgb(217, 236, 255);
        border-left-style: solid;
        border-left-width: 0.666667px;
        
        border-right-color: rgb(217, 236, 255);
        border-right-style: solid;
        border-right-width: 0.666667px;
        
        border-top-color: rgb(217, 236, 255);
        border-top-style: solid;
        border-top-width: 0.666667px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px; */
        box-sizing: border-box;
        color-scheme: light;
        

        /* font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
        /* font-feature-settings: normal; */
        font-size: 14px;
        /* font-variation-settings: normal; */
        height: 32px;
        
        line-height: 12px;
        margin-right: 8px;
        padding-bottom: 0px;
        padding-left: 9px;
        padding-right: 5px;
        padding-top: 0px;
        tab-size: 4px;
        text-size-adjust: 100%;
        text-wrap: nowrap;
        user-select: none;
        vertical-align: middle;
        white-space-collapse: collapse;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-user-drag: element;

        border-radius: 4px 4px 0 0;
    }

    .tag-text{
        width: 60px;
        margin: 2px;
    }
    .tabDiv{
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
</style>
@/pages/application/applicationStore@/utils/Emitter@/router/MenuConfig